<template>
    <div class="all">
        <video muted="muted" src="../../video/vv2.mp4" autoplay="autoplay" loop="loop" class="video"></video>
        <form class="mask">
            <h1>管理系统</h1>
            <el-form ref="loginForm" :model="loginFormData" status-icon :rules="rules" label-width="120px"
                class="demo-loginFormData">
                <el-form-item label="用户名" prop="username" class="username-form-item">
                    <el-input v-model="loginFormData.username" type="password" autocomplete="off" />
                </el-form-item>
                <el-form-item label="密码" prop="password" class="password-form-item">
                    <el-input v-model="loginFormData.password" type="password" autocomplete="off" />
                </el-form-item>
                <el-form-item label="验证码" prop="capture" class="capture-form">
                    <div class="capture-form3">
                        <el-input v-model="loginFormData.capture" class="capture-form1" />
                        <div class="capture-form2"></div>
                    </div>
                    
                </el-form-item>
                <el-form-item class="buttom-form">
                    <el-button type="primary" @click="submitForm(loginForm)" class="button1">登入</el-button>
                </el-form-item>
            </el-form>
        </form>
    </div>
</template>
  
<script setup>
import { reactive, ref } from 'vue'
// 引入校验函数
import {rules,useSubmitForm} from "../../composition/login/vaildate"

// 表单校验成功之后，回调的方法
let vaildateSucess = ()=>{
    console.log('校验成功');
}
// 表单校验失败之后，回调的方法
let vaildateFailed = ()=>{
    console.log('校验失败');
} 

// 使用SubmitForm
let submitForm = useSubmitForm(vaildateSucess,vaildateFailed)

const loginForm = ref()

// 注入到表单的数据
const loginFormData = reactive({
    username: '',
    password: '',
    capture: '',
})




</script>
<style lang="less" scoped> 
.all {
    height: 100%;

    .video {
        width: 1920px;
        // height: 100%;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }

    .mask {
        width: 400px;
        height: 500px;
        border-radius: 5px;
        background-color: rgba(0, 0, 0, 0.3);
        position: fixed;
        top: 100px;
        left: 100px;

        h1 {
            text-align: center;
            padding: 80px 0 60px 0;
        }
    }
}

.username-form-item,
.password-form-item {
    .el-input {
        width: 200px !important;
    }
}

.capture-form {

    .capture-form2 {
        width: 110px !important;
    }

    .capture-form2 {
        height: 32px;
        background-color: white;
        border-radius: 0 3px 3px 0;
    }
    .capture-form3{
        background-color: white;
        border-radius: 3px 3px 3px 3px;
        display: flex;
        .capture-form1{
        width: 90px !important;
        :deep(.el-input__wrapper){
            box-shadow: none;
        }
        }
    }

}
.button1{
    width: 200px;
}
</style>
  